<template>
  <div>
    <div class="header_left">
      <div>
        <i class="iconfont icon-huidaodingbu2"></i>
        <div>
          <p>排放核算</p>
          <div>
            <h3>最近查看</h3>
            <i class="iconfont icon-huidaodingbu2"></i>
          </div>
        </div>
      </div>
      <a-button>新建</a-button>
    </div>

    <div class="header_right">
      <div>5 个项目 • 已在1 分钟前更新</div>
      <div>
        <div>
          <input type="text" />
        </div>
        <div>
          <a-dropdown>
            <a-menu slot="overlay" @click="handleMenuClick">
              <a-menu-item key="1">
                <a-icon type="user" />1st menu item
              </a-menu-item>
              <a-menu-item key="2">
                <a-icon type="user" />2nd menu item
              </a-menu-item>
              <a-menu-item key="3">
                <a-icon type="user" />3rd item
              </a-menu-item>
            </a-menu>
            <a-button style="margin-left: 8px">
              <i class="iconfont icon-huidaodingbu2"></i>
              <a-icon type="down" />
            </a-button>
          </a-dropdown>
        </div>
        <div>
          <i class="iconfont icon-huidaodingbu2"></i>
        </div>
      </div>
    </div>

    <a-table :columns="columns" :data-source="data" @change="onChange" />
  </div>
</template>


<script>
import ConetentPanel from "@/components/Tools/ConetentPanel.vue";
const columns = [
  {
    title: "Name",
    dataIndex: "name",
    filters: [
      {
        text: "Joe",
        value: "Joe"
      },
      {
        text: "Jim",
        value: "Jim"
      },
      {
        text: "Submenu",
        value: "Submenu",
        children: [
          {
            text: "Green",
            value: "Green"
          },
          {
            text: "Black",
            value: "Black"
          }
        ]
      }
    ],
    // specify the condition of filtering result
    // here is that finding the name started with `value`
    onFilter: (value, record) => record.name.indexOf(value) === 0,
    sorter: (a, b) => a.name.length - b.name.length,
    sortDirections: ["descend"]
  },
  {
    title: "Age",
    dataIndex: "age",
    defaultSortOrder: "descend",
    sorter: (a, b) => a.age - b.age
  },
  {
    title: "Address",
    dataIndex: "address",
    filters: [
      {
        text: "London",
        value: "London"
      },
      {
        text: "New York",
        value: "New York"
      }
    ],
    filterMultiple: false,
    onFilter: (value, record) => record.address.indexOf(value) === 0,
    sorter: (a, b) => a.address.length - b.address.length,
    sortDirections: ["descend", "ascend"]
  }
];

const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park"
  },
  {
    key: "2",
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park"
  },
  {
    key: "3",
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park"
  },
  {
    key: "4",
    name: "Jim Red",
    age: 32,
    address: "London No. 2 Lake Park"
  }
];

function onChange(pagination, filters, sorter) {
  //   console.log("params", pagination, filters, sorter);
}

export default {
  data() {
    return {
      data,
      columns
    };
  },
  components: {
    ConetentPanel
  },
  methods: {
    onChange
  }
};
</script>
<style lang="scss">
.header_left {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.header_right {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>